<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="m1280 f f-a-c f-w-w f-j-b" style="margin-bottom: 50px">
			<div @click="goOrder(index + 1, item.title)" v-for="(item, index) in list" :key="index" class="titl f f-d-c f-j-c">
				<div class="img f f-a-c">
					<img :src="item.img" class="imgOne" alt="" /><span>{{ item.title }}</span>
				</div>
				<div class="count">{{ item.content }}</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import o1 from "../../../assets/sysIcon/01@2x.png";
	import o2 from "../../../assets/sysIcon/02@2x.png";
	import o3 from "../../../assets/sysIcon/03@2x.png";
	import o4 from "../../../assets/sysIcon/04@2x.png";
	import o5 from "../../../assets/sysIcon/05@2x.png";
	import o6 from "../../../assets/sysIcon/06@2x.png";
	import o7 from "../../../assets/sysIcon/07@2x.png";
	import o8 from "../../../assets/sysIcon/08@2x.png";
	import o9 from "../../../assets/sysIcon/09@2x.png";
	import o10 from "../../../assets/sysIcon/10@2x.png";
	import o11 from "../../../assets/sysIcon/11@2x.png";
	import o12 from "../../../assets/sysIcon/12@2x.png";
	import o13 from "../../../assets/sysIcon/13@2x.png";
	import o14 from "../../../assets/sysIcon/14@2x.png";
	import o15 from "../../../assets/sysIcon/15@2x.png";
	import o16 from "../../../assets/sysIcon/16@2x.png";
	import o17 from "../../../assets/sysIcon/17@2x.png";
	import o18 from "../../../assets/sysIcon/18@2x.png";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let list = ref([
		{
			img: o1,
			title: "Help & Support",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o2,
			title: "Trust & Safety",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o3,
			title: "Xpert Guide",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o4,
			title: "KnowClub Guide",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o5,
			title: "Our Story",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o6,
			title: "Investor",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o7,
			title: "Career",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o8,
			title: "Press & News",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o9,
			title: "Terms of Service",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o10,
			title: "Privacy Policy",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o11,
			title: "Business Solutions",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o12,
			title: "Enterprise plan",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o13,
			title: "Partnership",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o14,
			title: "Invite a Friend",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o15,
			title: "Events",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o16,
			title: "Blog",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o17,
			title: "Podcast",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		},
		{
			img: o18,
			title: "FAQ",
			content: "This is a text introduction This is a text introduction This is a text introduction"
		}
	]);
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	// 去OrderManagement
	const goOrder = (num, str) => {
		router.push({
			path: "/OrderManagement",
			query: {
				num: num,
				str: str
			}
		});
	};
	const goWen = () => {
		router.push("/BlogFAQS");
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style lang="scss" scoped>
	.titl {
		width: 408px;
		height: 216px;
		background: #f7f7f9;
		border-radius: 16px;
		padding: 0 48px;
		margin-bottom: 48px;
		cursor: pointer;
		.img {
			margin-bottom: 15px;
			.imgOne {
				width: 32px;
				height: 32px;
			}
			span {
				font-size: 20px;
				// font-family: Manrope, Manrope-700;
				font-weight: 700;
				text-align: LEFT;
				color: #02102e;
			}
		}
		.count {
			font-size: 16px;
			font-family: Manrope, Manrope-400;
			font-weight: 400;
			text-align: LEFT;
			line-height: 1.5;
			color: #8590a1;
		}
	}
</style>
